<template>
  <a-dropdown placement="topCenter">
    <div class="sheetSummaryInfo flex justify-between align-center">
      <div
        :class="{
          'justify-between': footerAlign == 'right',
          'justify-start': footerAlign == 'left',
          'justify-start': footerAlign == 'center',
        }"
        class="flex align-center"
      >
        <span
          v-if="row[column.field] || row[column.field] == 0"
          class="summaryName"
          >{{ footerTypeConvert() }}：</span
        >
        <span
          v-if="row[column.field] || row[column.field] == 0"
          class="summaryValue"
          :class="{
            'flex-sub text-center': footerAlign == 'center',
          }"
          :title="row[column.field]"
          >{{ convertNumber() }}</span
        >
      </div>
      <a-icon type="caret-down" class="iconArrow"></a-icon>
    </div>
    <div slot="overlay" class="dropdown-select">
      <div class="clearDefault hoverText">请选择居中方式</div>
      <div class="padding-xs padding-top-xs padding-bottom-xs">
        <a-radio-group
          :default-value="footerAlign"
          @change="footerAlignClick($event)"
          button-style="solid"
        >
          <a-radio-button value="left"> 居左 </a-radio-button>
          <a-radio-button value="center"> 居中 </a-radio-button>
          <a-radio-button value="right"> 居右 </a-radio-button>
        </a-radio-group>
      </div>

      <div class="clearDefault hoverText">请选择统计方式</div>
      <div
        class="optionItem"
        :class="{ checked: footerChecked('no') }"
        @click="footerClick('no')"
      >
        <div class="text overflow_ellipsis">不显示</div>
        <a-icon type="check" class="icon" v-if="footerChecked('no')" />
      </div>
      <a-divider class="divider" />
      <div
        class="optionItem"
        :class="{ checked: footerChecked('nu') }"
        @click="footerClick('nu')"
      >
        <div class="text overflow_ellipsis">已填写</div>
        <a-icon type="check" class="icon" v-if="footerChecked('nu')" />
      </div>
      <div
        class="optionItem"
        :class="{ checked: footerChecked('nn') }"
        @click="footerClick('nn')"
      >
        <div class="text overflow_ellipsis">未填写</div>
        <a-icon type="check" class="icon" v-if="footerChecked('nn')" />
      </div>
      <a-divider class="divider" v-if="footerShow()" />
      <div
        class="optionItem"
        v-if="footerShow()"
        :class="{ checked: footerChecked('sum') }"
        @click="footerClick('sum')"
      >
        <div class="text overflow_ellipsis">求和</div>
        <a-icon type="check" class="icon" v-if="footerChecked('sum')" />
      </div>
      <div
        class="optionItem"
        v-if="footerShow()"
        :class="{ checked: footerChecked('avg') }"
        @click="footerClick('avg')"
      >
        <div class="text overflow_ellipsis">平均值</div>
        <a-icon type="check" class="icon" v-if="footerChecked('avg')" />
      </div>
      <div
        class="optionItem"
        v-if="footerShow()"
        :class="{ checked: footerChecked('max') }"
        @click="footerClick('max')"
      >
        <div class="text overflow_ellipsis">最大值</div>
        <a-icon type="check" class="icon" v-if="footerChecked('max')" />
      </div>
      <div
        class="optionItem"
        v-if="footerShow()"
        :class="{ checked: footerChecked('min') }"
        @click="footerClick('min')"
      >
        <div class="text overflow_ellipsis">最小值</div>
        <a-icon type="check" class="icon" v-if="footerChecked('min')" />
      </div>
    </div>
  </a-dropdown>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  components: {},
  name: "list-footer",
  data() {
    return {};
  },
  computed: {
    ...mapGetters("account", ["zeroCode"]),
    footerAlign() {
      var find = this.$utils.find(
        this.sheetSummary,
        (f) => f.key == this.column.field
      );
      if (find) {
        return find.align;
      }
      return "left";
    },
  },
  props: {
    row: {
      type: Object,
    },
    column: {
      type: Object,
    },
    options: {
      type: Object,
    },
    sheetSummary: Array,
  },
  methods: {
    /**
     *
     * @param row
     * @param type
     */
    footerShow() {
      var check = false;
      if (this.$utils.isUndefined(this.options)) {
        return check;
      }
      if (
        [
          this.eipZeroCodeControl.number,
          this.eipZeroCodeControl.formulaNumber,
        ].includes(this.options.type)
      ) {
        check = true;
      }
      //关联字段为数字
      else if (
        [this.eipZeroCodeControl.otherField].includes(this.options.type) &&
        this.options.options.type == this.eipZeroCodeControl.number
      ) {
        check = true;
      }
      return check;
    },
    /**
     * 底部选项
     * @param field
     * @param index
     */
    footerChecked(type) {
      var find = this.$utils.find(
        this.sheetSummary,
        (f) => f.key == this.column.field
      );
      if (find) {
        if (find.type == type) {
          return true;
        }
      }
      return false;
    },
    /**
     * 数量格式化
     */
    convertNumber() {
      let row = this.row,
        column = this.column;
      var options = this.options.options;
      var data = row[column.field];
      if (
        this.options.type == this.eipZeroCodeControl.number ||
        this.options.type == this.eipZeroCodeControl.formulaNumber
      ) {
        if (options.percentile && data) {
          data = this.$utils.commafy(Number(data), {
            digits: options.precision,
          });
        }
        var value = options.addonBefore + data + options.addonAfter;
        return value;
      } else if (this.options.type == this.eipZeroCodeControl.otherField) {
        if (this.options.options.type == this.eipZeroCodeControl.number) {
          var systemZeroCodeData = this.$utils.find(
            this.zeroCode,
            (f) => f.zeroCodeId == this.options.options.zeroCodeId
          );
          if (systemZeroCodeData) {
            var columns = JSON.parse(systemZeroCodeData.columnJson);
            //得到明细
            var columnFind = this.$utils.find(
              columns,
              (f) => f.key == this.options.options.field
            );
            var options = columnFind.options;
            //千分位
            if (options.percentile && data) {
              data = this.$utils.commafy(Number(data), {
                digits: options.precision,
              });
            }
            data = options.addonBefore + data + options.addonAfter;
          }
        }
        return data;
      } else {
        return data;
      }
    },
    /**
     * 底部类型点击
     * @param column
     * @param type
     */
    footerClick(type) {
      var align = "left";
      var find = this.$utils.find(
        this.sheetSummary,
        (f) => f.key == this.column.field
      );
      if (find) {
        align = find.align;
      }
      this.$emit("click", { column: this.column, type, align });
    },
    /**
     * 底部类型点击
     * @param column
     * @param type
     */
    footerAlignClick(event) {
      var type = "no";
      var find = this.$utils.find(
        this.sheetSummary,
        (f) => f.key == this.column.field
      );
      if (find) {
        type = find.type;
      }
      var align = event.target.value;
      this.$emit("click", { column: this.column, type, align });
    },
    /**
     * 底部选项
     * @param field
     * @param index
     */
    footerTypeConvert() {
      var find = this.$utils.find(
        this.sheetSummary,
        (f) => f.key == this.column.field
      );
      if (find) {
        switch (find.type) {
          case "no":
            return "";
          case "nu":
            return "已填写";
          case "nn":
            return "未填写";
          case "sum":
            return "求和";
          case "avg":
            return "平均值";
          case "max":
            return "最大值";
          case "min":
            return "最小值";
        }
      }
    },
  },
};
</script>

<style lang="less" scoped>
.sheetSummaryInfo:not(.disabled):hover {
  background-color: #eaeaea !important;
}
.sheetSummaryInfo {
  background-color: #f6f6f6 !important;
  height: auto;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: 0 1px;
  padding: 0 6px;
  align-items: center;
  box-sizing: border-box;
}
.sheetSummaryInfo .iconArrow {
  color: #aaa;
  font-size: 16px;
  line-height: 28px;
  visibility: hidden;
}
.sheetSummaryInfo:not(.disabled):hover .iconArrow {
  visibility: visible;
}
.sheetSummaryInfo .summaryName {
  color: #9e9e9e;
}
.sheetSummaryInfo .summaryValue {
  color: #4d4d4d;
}
.summaryCellMenuTitle {
  color: #9e9e9e !important;
  font-size: 12px;
  margin: 0 16px;
}
.optionItem.checked {
  background-color: @primary-color !important;
  color: #fff;
}
.optionItem.checked .icon {
  color: #fff;
}
.optionItem:hover {
  background-color: #e8eaec !important;
}
.dropdown-select {
  width: 190px;
}
.divider {
  margin: 3px 0;
}
</style>
